<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="订单号" width="150">
    </el-table-column>
    <el-table-column prop="customerName" label="客户名" width="120">
    </el-table-column>
    <el-table-column prop="totalPrice" label="订单总价" width="120">
    </el-table-column>
    <el-table-column prop="status" label="订单状态" width="120">
      <template slot-scope="scope">
        <el-tag :type="statusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template slot-scope="scope">
        <el-button v-if="scope.row.status === 'Pending'" type="success"
          @click="processOrder(scope.row, 'Confirmed')">确认订单</el-button>
        <el-button v-if="scope.row.status === 'Confirmed'" type="warning"
          @click="processOrder(scope.row, 'Shipped')">发货</el-button>
        <el-button v-if="scope.row.status === 'Shipped'" type="info"
          @click="processOrder(scope.row, 'Delivered')">完成</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 导入 Mock.js 用于生成模拟数据
import Mock from 'mockjs';
// 导入 Element UI 的 MessageBox 和 Message 组件
import { MessageBox, Message } from 'element-ui';

export default {
  // 组件的 data 函数返回一个对象，这个对象包含组件的初始数据
  data() {
    return {
      // 定义 tableData 数组，用于存储订单数据
      tableData: []
    };
  },
  // created 钩子函数在组件实例被创建之后被调用
  created() {
    // 尝试从 localStorage 加载数据
    this.loadTableDataFromLocalStorage();
    // 生成模拟数据
    this.generateMockData();
  },
  // 定义组件的方法
  methods: {
    // 根据订单状态返回 Element UI tag 的类型
    statusTagType(status) {
      // 定义状态和对应 Element UI tag 类型的映射关系
      const statusMap = {
        'Pending': 'info',
        'Confirmed': 'success',
        'Shipped': 'warning',
        'Delivered': 'danger'
      };
      // 返回状态对应的 Element UI tag 类型，如果没有找到对应的类型，则返回 'primary'
      return statusMap[status] || 'primary';
    },
    // 处理订单状态更新的逻辑
    processOrder(row, newStatus) {
      // 使用 Element UI 的 MessageBox 组件显示确认对话框
      MessageBox.confirm(`确定要将订单 ${row.id} 状态更新为 ${newStatus} 吗?`, '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果用户点击确定，则更新订单状态
        const index = this.tableData.findIndex(order => order.id === row.id);
        if (index !== -1) {
          // 如果找到对应的订单，则更新状态
          this.tableData[index].status = newStatus;
          // 保存更新后的数据到 localStorage
          this.saveTableDataToLocalStorage();
          // 显示成功消息
          Message.success('订单状态更新成功');
        } else {
          // 如果没有找到对应的订单，则显示错误消息
          Message.error('更新失败，找不到订单');
        }
      }).catch(() => {
        // 如果用户点击取消，则显示取消操作的消息
        Message({
          message: '已取消操作',
          type: 'info'
        });
      });
    },
    // 保存订单数据到 localStorage
    saveTableDataToLocalStorage() {
      // 将 tableData 数组转换为字符串，并存储到 localStorage 中
      const ordersString = JSON.stringify(this.tableData);
      localStorage.setItem('orders', ordersString);
    },
    // 从 localStorage 加载订单数据
    loadTableDataFromLocalStorage() {
      // 从 localStorage 获取订单数据字符串，并转换回数组
      const ordersString = localStorage.getItem('orders');
      return ordersString ? JSON.parse(ordersString) : [];
    },
    // 生成模拟数据
    generateMockData() {
      // 使用 Mock.js 生成模拟的订单数据
      const mockData = Mock.mock({
        'orders|30': [
          {
            'id|+1': 1,
            'customerName': '@cname',
            // 生成 100 到 500 之间的随机浮点数，保留两位小数作为订单总价
            'totalPrice|100-500.2': 100,
            'status': () => {
              // 随机返回一个订单状态
              const statuses = ['Pending', 'Confirmed', 'Shipped', 'Delivered'];
              return statuses[Mock.Random.integer(0, statuses.length - 1)];
            }
          }
        ]
      });
      // 将生成的模拟数据赋值给 tableData
      this.tableData = mockData.orders;
    }
  },
  // 观察者，用于在 tableData 发生变化时执行某些操作
  watch: {
    tableData(newVal) {
      // 当 tableData 更新时，保存数据到 localStorage
      this.saveTableDataToLocalStorage();
    }
  }
};
</script>


<style scoped>
.box-card {
  width: 80%;
  margin-bottom: 10px;
}
</style>